<template>
  <div id="main"></div>
</template>

<script>
import { defineComponent, onMounted } from "@vue/runtime-core";
import * as echarts from "echarts";
import axios from "axios";
export default defineComponent({
  setup() {
    const init = async () => {
      //geoCoordMap把所有可能出现的城市加到数组里面
      var geoCoordMap = {
        北京: [116.405285, 39.904989],
        上海: [121.472644, 31.231706],
        广州: [113.280637, 23.125178],
        深圳: [114.085947, 22.547],

        成都: [104.065735, 30.659462],
        杭州: [120.153576, 30.287459],
        重庆: [106.504962, 29.533155],
        西安: [108.948024, 34.263161],
        苏州: [120.619585, 31.299379],
        武汉: [114.298572, 30.584355],
        南京: [118.767413, 32.041544],
        天津: [117.190182, 39.125596],
        郑州: [113.665412, 34.757975],
        长沙: [112.982279, 28.19409],
        东莞: [113.760234, 23.048884],
        佛山: [113.122717, 23.028762],
        宁波: [121.549792, 29.868388],
        青岛: [120.369557, 36.094406],
        沈阳: [123.429096, 41.796767],
      };

      //2015年数据
      var d1 = {
        北京: 39437,
        上海: 32324,
        广州: 20016,
        深圳: 41494,

        成都: 7256.67,
        杭州: 16080,
        重庆: 6289,
        西安: 6450,
        苏州: 12251,
        武汉: 10000,
        南京: 18697,
        天津: 15553,
        郑州: 8790,
        长沙: 6448,
        东莞: 8371,
        佛山: 6082,
        宁波: 12250,
        青岛: 12384,
        沈阳: 7242,
      };

      //2016年数据
      var d2 = {
        北京: 57597,
        上海: 41741,
        广州: 22926,
        深圳: 43289,

        成都: 7643.42,
        杭州: 21655,
        重庆: 7493,
        西安: 6514,
        苏州: 16181,
        武汉: 13875,
        南京: 24867,
        天津: 23220,
        郑州: 12091,
        长沙: 7601,
        东莞: 11651,
        佛山: 7161,
        宁波: 13857,
        青岛: 13523,
        沈阳: 7242,
      };
      //2017年数据
      var d3 = {
        北京: 57768,
        上海: 53195.42,
        广州: 28578,
        深圳: 51477,

        成都: 11269.75,
        杭州: 28540,
        重庆: 9925,
        西安: 8880,
        苏州: 15320,
        武汉: 16259,
        南京: 25733,
        天津: 22205,
        郑州: 12859,
        长沙: 9873,
        东莞: 13913,
        佛山: 10229,
        宁波: 17037,
        青岛: 18142,
        沈阳: 7999,
      };

      var colors = [
        [
          "#1DE9B6",
          "#F46E36",
          "#04B9FF",
          "#5DBD32",
          "#FFC809",
          "#8DC1A9",
          "#E7BCF3",
          "#9D96F5",
          "#8378EA",
          "#8378EA",
        ],
      ];
      var colorIndex = 0;
      var year = ["2015", "2016", "2017"];
      var mapData = [[], [], []];

      /*柱子Y名称*/
      var categoryData = [];
      var barData = [];

      for (var key in geoCoordMap) {
        mapData[0].push({
          year: "2015",
          name: key,
          value: d1[key],
        });
        mapData[1].push({
          year: "2016",
          name: key,
          value: d2[key],
        });
        mapData[2].push({
          year: "2017",
          name: key,
          value: d3[key],
        });
      }
      for (var i = 0; i < mapData.length; i++) {
        mapData[i].sort(function sortNumber(a, b) {
          return a.value - b.value;
        });
        barData.push([]);
        categoryData.push([]);
        for (var j = 0; j < mapData[i].length; j++) {
          barData[i].push(mapData[i][j].value);
          categoryData[i].push(mapData[i][j].name);
        }
      }
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);

      const res = await axios.get("static/map/china.json");
      if (res.status == 200) {
        echarts.registerMap("china", res.data);
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };
      }

   
      let optionXyMap = {
          timeline: {
            data: year,
            axisType: "category",
            autoPlay: true,
            playInterval: 3000,
            left: "10%",
            right: "10%",
            bottom: "3%",
            width: "80%",
            label: {
              normal: {
                textStyle: {
                  color: "#ddd",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            symbolSize: 10,
            lineStyle: {
              color: "#555",
            },
            checkpointStyle: {
              borderColor: "#777",
              borderWidth: 2,
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: "#666",
                borderColor: "#666",
              },
              emphasis: {
                color: "#aaa",
                borderColor: "#aaa",
              },
            },
          },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: "cubicInOut",
          animationDurationUpdate: 1000,
          animationEasingUpdate: "cubicInOut",
          grid: {
            right: "1%",
            top: "15%",
            bottom: "10%",
            width: "20%",
          },
          tooltip: {
            trigger: "axis", // hover触发器
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: "rgba(150,150,150,0.1)", //hover颜色
              },
            },
          },
          geo: {
            show: true,
            map: "china",
            roam: true,
            zoom: 1,
            center: [113.83531246, 34.0267395887],
            label: {
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0,
              },
            },
          },
        },
        options: [],
      };
      for (var n = 0; n < year.length; n++) {
        optionXyMap.options.push({
          backgroundColor: "#013954",
          title: [
            {
              text: "客户地域分布",
              left: "20%",
              top: "7%",
              textStyle: {
                color: "#fff",
                fontSize: 25,
              },
            },
            {
              id: "statistic",
              text: year[n] + "年",
              left: "80%",
              top: "8%",
              textStyle: {
                color: "#fff",
                fontSize: 25,
              },
            },
          ],
          xAxis: {
            type: "value",
            scale: true,
            position: "top",
            min: 0,
            boundaryGap: false,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 2,
              textStyle: {
                color: "#aaa",
              },
            },
          },
          yAxis: {
            type: "category",

            nameGap: 16,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ddd",
              },
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#ddd",
              },
            },
            data: categoryData[n],
          },

          series: [
            //地图
            {
              type: "map",
              map: "china",
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: true, // 存在legend时显示
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: "#031525",
                  borderColor: "#FFFFFF",
                },
                emphasis: {
                  areaColor: "#2B91B7",
                },
              },
              animation: false,
              data: mapData,
            },
            //地图中闪烁的点
            {
              //  name: 'Top 5',
              type: "effectScatter",
              coordinateSystem: "geo",
              data: convertData(
                mapData[n]
                  .sort(function (a, b) {
                    return b.value - a.value;
                  })
                  .slice(0, 20)
              ),
              symbolSize: function (val) {
                return val[2] / 1200;
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: "{b}",
                  position: "right",
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  color: colors[colorIndex][n],
                  shadowBlur: 10,
                  shadowColor: colors[colorIndex][n],
                },
              },
              zlevel: 1,
            },
            //柱状图
            {
              zlevel: 1.5,
              type: "bar",
              symbol: "none",
              itemStyle: {
                normal: {
                  color: colors[colorIndex][n],
                },
              },
              data: barData[n],
            },
          ],
        });
      }
      myChart.setOption(optionXyMap);
    };

    onMounted(() => {
      init();
    });
    return {};
  },
});
</script>

<style lang='less' scoped>
#main {
  width: 100%;
  min-height: 580px;
  border: 1px solid red;
}
</style>